<template>
  <view class="page">
    <view class="msg-box" v-for="(i, k) in dataList" :key="k" @click="$toChat(i.id)">
      <view class="msg-left">
        <u-avatar :src="domain + i.avatar" size="50" />
        <u-badge max="99" :value="i.count" absolute :offset="[-5, -5]"> </u-badge>
      </view>
      <view class="msg-content">
        <u-text
          :text="i.name || '店铺名称'"
          color="#222"
          size="16"
          line-height="25"
          lines="1"
        />
        <u-text
          :text="i.content || '消息'"
          color="#d9d9d9"
          size="14"
          line-height="25"
          lines="1"
        />
      </view>
      <view>
        <u-text
          v-for="(t, index) in $TimeFormat(i.createtime * 1000, 'mm-dd,hh:MM').split(',')"
          :key="index"
          :text="t"
          lines="1"
          color="#b3b3b3"
          size="14"
        />
      </view>
    </view>
  </view>
</template>

<script>
import config from "@/request/baseUrl.js";
import { chatLists } from "@/request/chat.js";
export default {
  data() {
    return {
      domain: config.baseUrl,
      dataList: [], // 消息列表
    };
  },
  onShow() {
    this.getDataList();
  },
  onPullDownRefresh() {
    this.getDataList();
  },
  onLoad() {
    uni.$on("onChat", () => {
      this.getDataList();
    });
  },
  methods: {
    // 获取聊天列表
    getDataList() {
      chatLists()
        .then((res) => {
          if (res.code == 1) {
            this.dataList = res.data;
          }
        })
        .finally(() => {
          uni.stopPullDownRefresh();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx;
  .msg-box {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #d9d9d999;
    &:active {
      background-color: #fdfdfd;
    }
    .msg-left {
      position: relative;
    }
    .msg-content {
      flex: 1;
      margin-left: 20rpx;
    }
  }
}
</style>
